@extends('home.layout.base')
<link rel="stylesheet" href="{{URL::asset('./css/demand/add.css')}}">
@section('content')
<div class="mainHrContent" id="demandAdd">
    <div class="demandadd_left">
        <div>
            <div class="demandadd_step">
                <em>1</em>活动/会议/培训信息
            </div>
            <div class="demandadd_main">
                <el-form :model="form" label-position="top" size="mini" :rules="rules" ref="ruleForm1">
                    <el-form-item label="活动/会议/培训标题" prop="title">
                        <el-input v-model="form.title"></el-input>
                    </el-form-item>
                    <el-form-item label="活动/会议/培训封面图" prop="thumb">
                        <el-upload class="avatar-uploader" :action="uploadUrl" :show-file-list="false" :on-success="handleAvatarSuccessimg" :before-upload="beforeAvatarUpload">
                            <img v-if="form.thumb" :src="form.thumb" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="活动描述" prop="content">
                        <!-- <el-upload class="upload-demo" :action="uploadUrl" :on-remove="handleRemove" :on-error='handleErro' :on-success="handleAvatarSuccess" list-type="picture" :file-list="form.images">
                            <span class="addPicture">
                                <img src="{{URL::asset('./img/icon/addPicture.png')}}">
                                添加图片
                            </span>
                        </el-upload> -->
                        <el-input type="textarea" v-model="form.content" rows="10">
                        </el-input>
                    </el-form-item>
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="活动/会议/培训区域" prop="area">
                                <el-select placeholder="请选择" v-model="form.area">
                                    <el-option v-for="item in areaData" :key="item.id" :label="item.name" :value="item.id">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="活动/会议/培训地址" prop="place">
                                <el-input v-model="form.place"></el-input>

                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="报名截止时间" prop="enroll_at">
                                <el-date-picker format="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" v-model="form.enroll_at">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="活动/会议/培训时间" prop="start_at">
                                <el-date-picker ormat="yyyy-MM-dd HH:mm:ss" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" v-model="form.start_at">
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="报名费用（单位：人民币 元）" prop="cost">
                                <el-input v-model="form.cost"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="活动/会议/培训类型" prop="cid">
                                <el-cascader v-model="form.cid" :options="typeArr"></el-cascader>

                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <div>
            <div class="demandadd_step">
                <em>2</em>联系信息
            </div>
            <div class="demandadd_main">
                <el-form :model="form" label-position="top" size="mini" :rules="rules" ref="ruleForm">
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="联系人" prop="link_name">
                                <el-input v-model="form.link_name"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="联系人电话" prop="link_phone">
                                <el-input v-model="form.link_phone"> </el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="25">
                        <el-col :span="12">
                            <el-form-item label="部门" prop="link_department">
                                <el-input v-model="form.link_department"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="职位" prop="link_position">
                                <el-input v-model="form.link_position"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </div>
        </div>
        <button @click="submitForm('ruleForm','ruleForm1')">发布活动/会议/培训</button>
    </div>
    <div class="demandadd_right">
        <div class="recommendStore">
            <div class="recommendStore_store">
                <img src="{{URL::asset('./img/icon/recommend.png')}}" alt="...">
                热门活动
            </div>
            <div class="stroreListDetails" v-for="(item,index) in rightHot">
                <img :src="item.thumb">
                <div>
                    <span>@{{item.title}}</span>
                    <div>
                        <p class="stroreListDetailsP">
                            <span>
                                <img src="{{URL::asset('./img/icon/eyered.png')}}">
                                @{{item.view}}
                            </span>
                            <span>
                                <img src="{{URL::asset('./img/icon/childred.png')}}">
                                @{{item.number}}
                            </span>
                        </p>
                        <p class="stroreListDetailsP">
                            <span>
                                <img src="{{URL::asset('./img/icon/monyred.png')}}">
                                @{{item.cost}}
                            </span>
                            <span>
                                <img src="{{URL::asset('./img/icon/timered.png')}}">
                                @{{item.start_at}}
                            </span>
                        </p>
                    </div>
                </div>
                <button @click="window.location.href ='{{ route('home.activity.actDetails')}}?cateId='+item.id">报名</button>
            </div>
            <a style="display:block;width:100%" :href="item.link" v-for="item in imgData">
                <img :src="item.thumb" style="width:100%" alt="...">
            </a>
        </div>
    </div>
</div>
<style>
    .el-cascader--mini {
        width: 100%;
    }
</style>
@endsection
@section('scripts')
<script>
    $(() => {
        let demandAdd = new Vue({
            el: '#demandAdd',
            data: () => {
                return {
                    uploadUrl: UPLOAD_FILE,
                    fileList: [],
                    imageUrl: '',
                    areaData: [],
                    imgData: [],
                    form: {
                        title: '',
                        thumb: '',
                        content: '',
                        area: '',
                        place: '',
                        enroll_at: '',
                        cost: 0,
                        link_name: '',
                        link_phone: '',
                        link_department: '',
                        link_position: '',
                        cid: '',
                    },
                    rightHot: [],
                    typeArr: [],
                    rules: {
                        title: [{
                            required: true,
                            message: '请填写相关信息',
                            trigger: 'blur'
                        }],
                        thumb: [{
                            required: true,
                            message: '请选择封面图',
                            trigger: 'change'
                        }],
                        content: [{
                            required: true,
                            message: '请填写活动描述',
                            trigger: 'blur'
                        }],
                        cid: [{
                            required: true,
                            message: '请选择类型',
                            trigger: 'change'
                        }],
                        area: [{
                            required: true,
                            message: '请选择区域',
                            trigger: 'change'
                        }],
                        place: [{
                            required: true,
                            message: '请填写地址',
                            trigger: 'blur'
                        }],
                        enroll_at: [{
                            required: true,
                            message: '请选择时间',
                            trigger: 'change'
                        }],
                        start_at: [{
                            required: true,
                            message: '请选择时间',
                            trigger: 'change'
                        }],
                        link_name: [{
                            required: true,
                            message: '请填写联系人',
                            trigger: 'change'
                        }],
                        link_phone: [{
                            required: true,
                            validator: validateTel,
                            trigger: 'blur'
                        }],
                        link_department: [{
                            required: true,
                            message: '请填写部门',
                            trigger: 'change'
                        }],
                        link_position: [{
                            required: true,
                            message: '请填写职位',
                            trigger: 'change'
                        }],
                        cost: [{
                            required: true,
                            validator: validatePrice,
                            trigger: 'blur'
                        }],
                    }
                }
            },
            created() {
                apiAjax("{{ route('home.activity.addRightHotActApi')}}", 'get', {
                    hot: 2,
                }, (res) => {
                    if (res.code == 0) {
                        this.rightHot = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {});
                apiAjax("{{ route('home.public.advs')}}", 'get', {
                    adsense_id: 18
                }, (res) => {
                    if (res.code == 0) {
                        this.imgData = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {});
                apiAjax("{{ route('home.public.areas')}}", 'get', {}, (res) => {
                    if (res.code == 0) {
                        this.areaData = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {});
                apiAjax("{{ route('home.public.category')}}", 'get', {
                    type: 1
                }, (res) => {
                    if (res.code == 0) {
                        this.typeArr = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'warning'
                        });
                    }
                }, (erro) => {

                });
            },
            mounted() {},
            methods: {
                handleErro() {
                    this.$message.error('上传失败');
                },
                beforeAvatarUpload(file) {
                    const isJPG = file.type == 'image/jpeg' || file.type == 'image/png';
                    const isLt2M = file.size / 1024 / 1024 < 2;

                    if (!isJPG) {
                        this.$message.error('上传头像图片只能是 JPG/PNG 格式!');
                    }
                    if (!isLt2M) {
                        this.$message.error('上传头像图片大小不能超过 2MB!');
                    }
                    return isJPG && isLt2M;
                },
                handleAvatarSuccessimg(res, file) {
                    this.form.thumb = file.response.data.path;
                },
                handleAvatarSuccess(res, file) {
                    this.form.images.push(res.data.path)
                },
                handleRemove(file, fileList) {
                    this.form.images = [];
                    fileList.forEach(element => {
                        this.form.images.push(element.response.data.path)
                    });
                },
                submitForm(formName, formName1) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.$refs[formName1].validate((valid) => {
                                if (valid) {
                                    let data = {
                                        cate_pid: this.form.cid[0],
                                        cate_id: this.form.cid[1],
                                        user_id: JSON.parse(sessionStorage.getItem("HRuserDetails")).id,
                                        title: this.form.title,
                                        thumb: this.form.thumb,
                                        content: this.form.content,
                                        area: this.form.area,
                                        place: this.form.place,
                                        enroll_at: this.form.enroll_at,
                                        start_at: this.form.start_at,
                                        cost: this.form.cost,

                                        link_name: this.form.link_name,
                                        link_phone: this.form.link_phone,
                                        link_department: this.form.link_department,
                                        link_position: this.form.link_position,
                                    };
                                    apiAjax("{{ route('home.activity.actAddApi')}}", 'post', data, (res) => {
                                        if (res.code == 0) {
                                            this.$message({
                                                message: res.msg,
                                                type: 'success'
                                            });
                                            window.location.href = "{{ route('home.suppliermy.supplierAct') }}";
                                        } else {
                                            this.$message({
                                                message: res.msg,
                                                type: 'warning'
                                            });
                                        }
                                    }, (erro) => {

                                    });
                                } else {
                                    return false;
                                }
                            });
                        } else {
                            return false;
                        }
                    });
                },
            }
        })
    })
</script>
@endsection